<template>
 <view class="Water">
  <mineNavbar :styleData="styleData" />
  <scroll-view class="scroll" scroll-y>
   <view class="form">
    <view class="form-item-title">
     <view class="title">
      <view class="text">微信收款账号</view>
      <view class="borderB"> </view>
     </view>
    </view>

    <view class="form-item">
     <view class="item">
      <view class="label"> 微信昵称 </view>
      <input class="input" type="text" placeholder="请填写微信昵称" />
     </view>
     <view class="line" />
    </view>
    <view class="form-item">
     <view class="item">
      <view class="label"> 手机号码 </view>
      <input class="input" type="text" placeholder="请填写手机号码" style="padding-left: 30rpx" />
      <text class="num">获取验证码</text>
     </view>
     <view class="line" />
    </view>

    <view class="form-item">
     <view class="item">
      <view class="label"> 短信验证 </view>
      <input class="input" type="text" placeholder="请输入短信验证码" />
     </view>
     <view class="line" />
    </view>
   </view>

   <view class="submit">
    <text class="text"> 确定 </text>
   </view>
   <view class="submit back">
    <text class="text"> 返回 </text>
   </view>
   <view style="height: 200rpx" />
  </scroll-view>
 </view>
</template>

<script>
export default {
 components: {},
 data() {
  return {
   styleData: {
    show: true,
    tabbarText: "收款账户",
   },

   items: [],
   value: "",
   code: "",

   scale: {
    array: ["选项1", "选项2", "选项3"], // 你的选项数组
    index: 0, // 当前选择的索引
    currentValue: "请选择公司规模", // 初始显示的
   },
   typeScale: {
    array: ["选项1", "外包", "字眼"], // 你的选项数组
    index: 0, // 当前选择的索引
    currentValue: "请选择公司类型", // 初始显示的
   },
   scale: {
    array: ["选项1", "选项2", "选项3"], // 你的选项数组
    index: 0, // 当前选择的索引
    currentValue: "请选择公司规模", // 初始显示的
   },
   industry: {
    array: ["选项1", "选项2", "选项3"], // 你的选项数组
    index: 0, // 当前选择的索引
    currentValue: "请选择所属行业", // 初始显示的
   },
  };
 },
 computed: {},
 // 监控data中的数据变化
 watch: {},
 onLoad(options) { },
 onShow() { },
 onReady() { },
 methods: {
  toPath(path) {
   if (path === "") return;

   uni.navigateTo({
    url: `/${path}`,
   });
  },

  confirm() { },
  bindPickerChange(e) {
   console.log(e);
   this.scale.index = e.detail.value;
   this.scale.currentValue = this.scale.array[this.scale.index];
  },
  bindPickerChangeType(e) {
   console.log(e);
   this.typeScale.index = e.detail.value;
   this.typeScale.currentValue = this.typeScale.array[this.typeScale.index];
  },
  bindPickerChangeIndustry(e) {
   console.log(e);
   this.industry.index = e.detail.value;
   this.industry.currentValue = this.industry.array[this.industry.index];
  },
 },
};
</script>
<style lang="scss" scoped>
.Water {
 height: 100vh;
 width: 100%;
 background-color: #ffffff;

 .scroll {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 32rpx;

  .form {
   margin-top: 24rpx;
   width: 100%;
   padding-bottom: 33rpx;
   border-radius: 16rpx;
   background-color: #fff;
   display: flex;
   flex-direction: column;
   align-items: center;

   .form-item-title {
    width: 100%;
    margin-top: 28rpx;

    .title {
     position: relative;
     width: 200rpx;
     height: 45rpx;
     font-weight: 500;
     font-size: 32rpx;
     color: #000000e0;
     margin-left: 24rpx;
     margin-bottom: 24rpx;

     .text {
      z-index: 99;
      position: absolute;
     }

     .borderB {
      position: absolute;
      bottom: 4rpx;
      width: 30%;
      height: 14rpx;
      background-color: #ff9e24;
      z-index: 10;
      border-radius: 10rpx;
     }
    }
   }

   .form-item {
    position: relative;
    height: 98rpx;
    width: 702rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;

    .item {
     display: flex;
     align-items: center;
     margin-left: 24rpx;
     margin-right: 24rpx;

     width: 100%;
     height: 100%;

     .num {
      font-size: 24rpx;
      color: #317ED0;
     }

     .label {
      font-weight: 500;
      font-size: 28rpx;
      color: #000000;
      opacity: 0.45;
      margin-right: 40rpx;
     }

     .desc {
      font-weight: 500;
      font-size: 28rpx;
      color: #000000e0;
     }

     .arrows {
      position: absolute;
      bottom: 45rpx;
      right: 24rpx;
      width: 26rpx;
      height: 26rpx;

      image {
       width: 100%;
       height: 100%;
      }
     }
    }

    .line {
     height: 2rpx;
     background-color: #f2f2f2;
     margin: 0 24rpx;
    }
   }
  }

  .form-1 {
   margin-top: 24rpx;
   width: 100%;
   padding-bottom: 33rpx;
   border-radius: 16rpx;
   background-color: #fff;
   display: flex;
   flex-direction: column;
   align-items: center;

   .form-item-title {
    width: 100%;
    margin-top: 28rpx;

    .title {
     position: relative;
     width: 200rpx;
     height: 45rpx;
     font-weight: 500;
     font-size: 32rpx;
     color: #000000e0;
     margin-left: 24rpx;
     margin-bottom: 24rpx;

     .text {
      z-index: 99;
      position: absolute;
     }

     .borderB {
      position: absolute;
      bottom: 4rpx;
      width: 30%;
      height: 14rpx;
      background-color: #ff9e24;
      z-index: 10;
      border-radius: 10rpx;
     }
    }
   }

   .form-item {
    position: relative;
    height: 98rpx;
    width: 702rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;

    .item {
     display: flex;
     align-items: center;
     margin-left: 24rpx;
     margin-right: 24rpx;

     width: 100%;
     height: 100%;

     .label {
      font-weight: 500;
      font-size: 28rpx;
      color: #000000;
      opacity: 0.45;
      margin-right: 40rpx;
     }

     .desc {
      font-weight: 500;
      font-size: 28rpx;
      color: #000000e0;
     }

     .arrows {
      position: absolute;
      bottom: 45rpx;
      right: 24rpx;
      width: 26rpx;
      height: 26rpx;

      image {
       width: 100%;
       height: 100%;
      }
     }
    }

    .line {
     height: 2rpx;
     background-color: #f2f2f2;
     margin: 0 24rpx;
    }
   }

   .form-item-logo {
    position: relative;

    width: 702rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;

    .item {
     display: flex;
     flex-direction: column;
     justify-content: center;

     margin-left: 24rpx;
     margin-right: 24rpx;

     height: 100%;

     .label {
      font-weight: 500;
      font-size: 28rpx;
      color: #000000;

      margin-right: 40rpx;
     }

     .support {
      font-weight: 500;
      font-size: 22rpx;
      color: #00000073;
      letter-spacing: 0;
     }

     .file {}
    }
   }
  }

  .submit {
   width: 420rpx;
   height: 88rpx;
   background: #ff9e24;
   border-radius: 44rpx;
   display: flex;
   justify-content: center;
   align-items: center;
   margin: 0 auto;
   margin-top: 64rpx;

   .text {
    height: 45rpx;

    font-family: PingFangSC-Medium;
    font-weight: 500;
    font-size: 32rpx;
    color: #ffffff;
    letter-spacing: 0;
   }
  }

  .back {
   background: #ccc;
   color: #000000;
   margin-top: 30rpx;
  }
 }
}
</style>
